<template>
	<div class="managerbox">
			<el-row>
				<el-tabs type="border-card" v-model="activeName">
					<el-tab-pane label="经理基本信息管理" name="0">
						<el-table :data="emps">
							<el-table-column prop="eid" label="eid" v-if="false"></el-table-column>
							<el-table-column prop="job" label="职位"></el-table-column>
							<el-table-column prop="deptno" label="部门" v-if="false"></el-table-column>
							<el-table-column prop="dname" label="部门"></el-table-column>
							<el-table-column prop="ename" label="姓名"></el-table-column>
							<el-table-column prop="sex" label="性别">
								<template slot-scope="scope">
									<i v-if="scope.row.sex==0">男</i>
									<i v-else-if="scope.row.sex==1">女</i>
								</template>
							</el-table-column>
							<el-table-column prop="tel" label="电话"></el-table-column>
							<el-table-column prop="adss" v-if="false" label="家庭地址"></el-table-column>
							<el-table-column prop="birth"  label="出生日期"></el-table-column>
							<el-table-column prop="salary" label="工资"></el-table-column>
							<el-table-column prop="induct_date" label="入职日期"></el-table-column>
							<el-table-column label="操作">
								<template slot-scope="s">
						<!-- 利用作用域插槽，将当前行作为参数传给了方法del -->
						<!-- s.$index可以获取当前行数据的索引 -->
									<el-button type="success" @click="edit(s.$index,s.row)">修改</el-button>
									<el-button v-if="s.row.deptno==0" type="primary" @click="addtodept(s.$index,s.row)">分配</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-dialog title="修改经理信息" :visible.sync="dialogFormVisible">
							<el-form :model="form" label-width="100px" :rules="rules">
								<el-input v-model="form.eid" autocoplete="off"  type="hidden"></el-input>
								<el-form-item label="姓    名  :">
									<el-input v-model="form.ename" autocoplete="off" disabled></el-input>
								</el-form-item>
								<el-form-item label="电    话  :" prop="tel">
									<el-input v-model="form.tel" autocoplete="off"></el-input>
								</el-form-item>
								
								<el-form-item label="工    资  :" prop="salary">
									<el-input v-model="form.salary" autocoplete="off"></el-input>
								</el-form-item>
								<el-form-item label="家庭地址:">
									<el-cascader 
										style="float:left"
										size="large"
										:options="options"
										v-model="selectedOptions"
										@change="handleChange">
									</el-cascader>
								</el-form-item>
								<el-form-item>
									<el-input v-model="form.adss" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.sex" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.job" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.deptno" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.induct_date" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.birth" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.dname" autocoplete="off" type="hidden"></el-input>
								</el-form-item> 
								<el-button type="primary" @click="sureUpdate">确 定</el-button>
							</el-form>
						</el-dialog>
					
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisible = false">取 消</el-button>
						</div>
					</el-tab-pane> 
					<el-tab-pane label="经理调离该部门" name="1">
						<el-form  label-width="100px">
							<el-form-item label="请选择经理  :" >
								<el-select v-model="pickemp" placeholder="请选择" style="float:left" @change="checkpick">
									<el-option
										v-for="item in emps"
										v-if="item.deptno!=null && item.todosnum==0"
										:key="item.eid"
										:label="item.ename"
										:value="item.eid">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="当前是  :">
								<span v-if="deptname!=''" style="color:sandybrown;font-weight:bold;float:left">{{deptname}}经理</span>
							</el-form-item>
							<span style="color:#ec3f3f;font-size:14px;">{{error}}</span></br></br>
							<el-button type="primary" @click="quitDept()" :disabled="disable">确 定</el-button>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="撤销经理职务" name="2">
						<el-form  label-width="100px">
							<el-form-item label="请选择经理  :" >
								<el-select v-model="pickemp2" placeholder="请选择" style="float:left" @change="checkpick2">
									<el-option
										v-for="item in emps"
										v-if="item.job=='manager' && item.todosnum==0"
										:key="item.eid"
										:label="item.ename"
										:value="item.eid">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="当前是  :">
								<span v-if="deptname2!=''" style="color:sandybrown;font-weight:bold;float:left">{{deptname2}}经理</span>
							</el-form-item>
							<span style="color:#ec3f3f;font-size:14px;">{{error2}}</span></br></br>
							<el-button type="primary" @click="quitManager()" :disabled="disable2">确定撤销其经理职务</el-button>
						</el-form>
					</el-tab-pane>
				</el-tabs>
			</el-row>
		</div>
	</template>
	
	<script>
		import { regionDataPlus,CodeToText,TextToCode } from 'element-china-area-data'
	
		export default {
			name:'queryrole',
					data() {
						return {
							rules:{
								/* 验证的对象 */
								
								tel:[
									{ required: true, message: '请输入手机号', trigger: 'blur'},
									{ pattern: /^1(3|4|5|6|7|8)\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'},
								],
								salary:[
									{ required: true, message: '请输入工资', trigger: 'blur'},
									{ pattern: /^[1-9]{1}[0-9]{0,}$/, message: '请输入正确的工资形式', trigger: 'blur'},
								],
							},
							emps:[],
							depts:[],
							options: regionDataPlus,
							selectedOptions: [],
							selectedzn:[],
							dialogFormVisible:false,
							dialogFormVisible2:false,
							pickdept:0,
							pickemp:'',
							pickemp2:'',
							pedeptno:'',
							pedeptno2:'',
							error:'',
							key:'',
							error2:'',
							key2:'',
							form:{
									eid:'',
									ename:'',
									sex:'',
									tel:'',
									birth:'',
									deptno:'',
									job:'',
									adss:[],
									induct_date:'',
									dname:'',
									salary:'',
								},
								form2:{
										eid:0,
										ename:'',
										sex:'',
										tel:'',
										birth:'',
										deptno:'',
										job:'',
										adss:[],
										salary:0.00,
										inductDate:''
									},
							isedit:false,
							myindex:-1,
							colors:["gray","green","red"],
							disable:true,
							disable2:true,
							activeName:0,
							deptname:'',
							deptname2:'',
						}
					},
					created(){
						this.$axios.post("showmanager").then(v=>{
							console.log(v)
							if(v.data){
								this.depts=v.data.depts;
								this.emps=v.data.emps;
							}else{
								alert("出错了！！");
							}
						}).catch(ex=>{
							alert("出错了！"+ex);
						})
					},
					methods:{
						edit(index,row){
							this.isedit=true;
							this.dialogFormVisible=true;
							this.form={
								eid:row.eid,
								ename:row.ename,
								sex:row.sex,
								tel:row.tel,
								adss:this.selectedzn,
								birth:row.birth,
								job:row.job,
								deptno:row.deptno,
								salary:row.salary,
								induct_date:row.induct_date,
								dname:row.dname,
							};
							
							var location=row.adss.split(',');
							for(var i = 0; i < location.length; i++){
								//alert(TextToCode[location[0]].code);
								if(i==0){
										this.selectedOptions.push(TextToCode[location[i]].code);
									}else if(i==1){
										this.selectedOptions.push(TextToCode[location[i-1]][location[i]].code);
									}else if(i==2){
										this.selectedOptions.push(TextToCode[location[i-2]][location[i-1]][location[i]].code);
									} 
								}
							this.myindex=index;
						},
			
						sureUpdate:function(){
							//根据form.id确认要修改的webs的id值
								var y=this.selectedOptions;
								for(var i = 0; i < y.length; i++){
									this.selectedzn.push(CodeToText[y[i]]);
									/* if(i==y.length-1){
										this.selectedzn=this.selectedzn.concat(CodeToText[y[i]]);
										break;
									}
									this.selectedzn=this.selectedzn.concat(CodeToText[y[i]],','); */
								}
								this.$axios.post("changeTelandsal",this.form).then(v=>{
									console.log(v)
									if(v.data){
										alert("修改成功！！")
									}else{
										alert("出错了！！");
									}
								}).catch(ex=>{
									alert("出错了！"+ex);
								})
								this.emps.splice(this.myindex,1,this.form);
								//确认修改
								this.dialogFormVisible=false;
								this.selectedOptions=[],
								this.selectedzn=[],
								this.isedit=false;//修改状态结束
							},
						handleChange (value) {
							//alert(CodeToText['110000']);
							//alert(TextToCode['石峰区'].code);
							console.log(value)
						},
						
						checkpick(){
							this.error='';
							if(this.pickemp==''){
								this.disable=true;
							}else{
								this.emps.forEach((v)=>{
									if(v.eid==this.pickemp){
										this.depts.forEach((w)=>{
											if(w.deptno==v.deptno){
												this.deptname=w.dname;
												this.pedeptno=w.deptno;
											}
										});
									}
								});
								this.$axios.post("queryTodos?eid="+this.pickemp+"").then(v=>{
									console.log(v)
									if(v.data){
										this.key=v.data.ans;
										if(this.key=='Y'){
											this.disable=false;
										}else{
											this.disable=true;
											this.error='此经理还有待办事宜未处理,无法调离!';
										}
									}else{
										alert("出错了！！");
									}
								}).catch(ex=>{
									alert("出错了！"+ex);
								})
								
							}
						},
						quitDept(){
							this.$axios.post("mngChangedt?eid="+this.pickemp+"&deptno="+this.pedeptno+"").then(v=>{
								console.log(v)
								if(v.data){
									alert("经理调离该部门成功！！");
									this.$router.push("/home/querydept");
								}else{
									alert("出错了！！");
								}
							}).catch(ex=>{
								alert("出错了！"+ex);
							})
							
						},
						checkpick2(){
							this.error2='';
							if(this.pickemp2==''){
								this.disable2=true;
							}else{
								this.emps.forEach((v)=>{
									if(v.eid==this.pickemp2){
										this.depts.forEach((w)=>{
											if(w.deptno==v.deptno){
												this.deptname2=w.dname;
												this.pedeptno2=w.deptno;
											}
										});
									}
								});
								this.$axios.post("queryTodos?eid="+this.pickemp2+"").then(v=>{
									console.log(v)
									if(v.data){
										this.key2=v.data.ans;
										if(this.key2=='Y'){
											this.disable2=false;
										}else{
											this.disable2=true;
											this.error2='此经理还有待办事宜未处理,无法调离!';
										}
									}else{
										alert("出错了！！");
									}
								}).catch(ex=>{
									alert("出错了！"+ex);
								})
							}
						},
						quitManager(){
							
							for(var i=0;i<this.emps.length;i++){
								if(this.emps[i].eid==this.pickemp2){
									this.emps[i].job='stuff';
									this.emps.splice(i,1);
									break;
								}
							} 
							this.depts.forEach((w)=>{
								if(w.eid==this.pickemp2){
									w.eid='';
								}
							});
							this.$axios.post("mngLower?eid="+this.pickemp2+"&deptno="+this.pedeptno2+"").then(v=>{
								console.log(v)
								if(v.data){
									alert("经理调离该部门成功！！");
								}
							}).catch(ex=>{
								alert("出错了！"+ex);
							})
							
							this.pickemp2='';
							this.deptname2='';
							this.pedeptno2='',
							this.activeName="0";
						},
					}
				}
			</script>
			
	<style>
	
	</style>